<extend name="Public/base"/>

<block name="body">
    <div class="main-title">
        <h2>代客下单</h2>
    </div>
    <form action="{:U('Order/addOrderDetail')}" method="post" class="form-horizontal">
        <div class="form-item">
            <label class="item-label">商品分类</span></label>
            <div class="controls">
                <select id="type" name="type">
                    <option value="">请选择分类</option>
                    <volist name="typelist" id="tl">
                        <option value="{$tl.id}">{$tl.name}</option>
                    </volist>
                </select>
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">商品名称</span></label>
            <div class="controls">
                <select id="goods" name="goods_id">
                    <option value="">请选择商品</option>
                </select>
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">商品规格</label>
            <div class="controls">
                <select id="spe" name="spe_id">
                    <option value="">请选择规格</option>
                </select>
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">单位</label>
            <div class="controls">
                <input type="text" class="text input-large" name="unit" id="unit" readonly="readonly">
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">单价</label>
            <div class="controls">
                <input type="text" class="text input-large" name="price" id="price">
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">数量</label>
            <div class="controls">
                <input type="text" class="text input-large" name="num" id="num">
            </div>
        </div>
        <div class="form-item">
            <label class="item-label">合计</label>
            <div class="controls">
                <input type="text" class="text input-large" name="total" id="total" readonly="readonly">
            </div>
        </div>
        <div class="form-item">
            <input type="hidden" id="gname" name="goods_name">
            <input type="hidden" id="sname" name="spe_name">
            <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
            <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
        </div>
    </form>
</block>
<block name="script">
    <script type="text/javascript">
        var speobjlist;

        $(function(){
            $("#type").change(function(){
                var tid = $('#type').val();
                $.get("{:U('Order/getGoodsList')}",{typeid:tid},function(data){
                    $("#goods").empty();
                    if(data.length > 0){
                        $("#goods").append("<option value=''>请选择商品</option>");
                    }
                    for(var i = 0;i < data.length;i++){
                        var goodsobj = data[i];
                        $("#goods").append("<option value="+goodsobj['id']+">"+goodsobj['name']+"</option>");
                    }
                });
            });

            $("#goods").change(function(){
                var gid = $('#goods').val();
                var gtext = $("#goods").find("option:selected").text();
                $("#gname").val(gtext);
                $.get("{:U('Order/getGoodsSpeList')}",{goodsid:gid},function(data){
                    speobjlist = data;
                    $("#spe").empty();
                    if(data.length > 0){
                        $("#spe").append("<option value=''>请选择规格</option>");
                    }
                    for(var i = 0;i < data.length;i++){
                        var speobj = data[i];
                        $("#spe").append("<option value="+speobj['id']+">"+speobj['name']+"</option>");
                    }
                });  
            });

            $("#spe").change(function(){
                var ind = $('#spe').get(0).selectedIndex;
                var speobj = speobjlist[ind-1];
                $("#unit").val(speobj['unit']);
                $("#price").val(speobj['price']);
                $("#sname").val(speobj['name']);
            });

            $("#price").blur(function(){
                totalprice();
            });

            $("#num").blur(function(){
                totalprice();
            });
        });

        function totalprice(){
            var pricevar = $("#price").val();
            var numvar = $("#num").val();
            var totalvar = pricevar * numvar;
            $("#total").val(totalvar.toFixed(2));
        }
        //导航高亮
        highlight_subnav('{:U('Order/placeorder')}');
    </script>
</block>